<template>
    <el-container>
      <el-main>
        <div style="margin-top: 120px;height:200px;">
            <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="100px"> 
                <el-form-item label="充值金额">
                    
                    <el-input v-model="form.model.amount" placeholder="请输入金额"></el-input>
                    <div style="margin-left: 10px;">当前账户余额1000</div>
                </el-form-item>
            </el-form>
        </div>
      </el-main>
      <el-footer class="sa-footer--submit">
        <el-button
          type="primary"
          @click="sure"
          >确定</el-button
        >
      </el-footer>
    </el-container>
  </template>
  <script setup>
    import { nextTick, onMounted, reactive, ref, unref } from 'vue';
    import { api } from '../earning.service';
    import { cloneDeep } from 'lodash';
    import pay from './pay.vue';
    import { useModal } from '@/sheep/hooks';
  
    const emit = defineEmits(['modalCallBack']);

    const props = defineProps({
      modal: {
        type: Object,
      },
    });

    const options = ref([]);

    // 添加 编辑 form
    let formRef = ref(null);

    const form = reactive({
      model: {
        amount: '',
      },
      rules: {
        amount: [{ required: true, message: '请输入提现金额', trigger: 'blur' }],
      },
    });

    const loading = ref(false);

    // 获取详情
    async function getDetail(id) {
      loading.value = true;
      const { error, data } = await api.questionCategory.detail(id);
      if(error==0){
        form.model = data;
       
      }
  
      loading.value = false;
     
    }

    function sure(){
        useModal(
            pay,
        { title: '立即充值'},
        {
          confirm: () => {
            console.log('pay');
          },
        },
      );
    }

    // 表单关闭时提交
    async function confirm() {
      // 表单验证
      unref(formRef).validate(async (valid) => {
        if (!valid) return;
        let submitForm = cloneDeep(form.model);
        const { error } =
          props.modal.params.type == 'add'
            ? await api.questionCategory.add(submitForm)
            : await api.questionCategory.edit(props.modal.params.id, submitForm);
        if (error == 0) {
          emit('modalCallBack', { event: 'confirm' });
        }
      });
    }
    async function init() {
      
      if (props.modal.params.id) {
        await getDetail(props.modal.params.id);
      }
    }

    function all(){
        console.log('22222');
    }



    onMounted(() => {
      init();
    });
  </script>

